<template>
  <div class="room-list">
    <div class="room-list-item" ref="wrapper">
      <div>
        <!-- 房间列表 -->
        <router-link to="/roomdetail">
          <van-card
            num="2"
            tag="标签"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            :thumb="imageURL"
            origin-price="10.00"
            v-for="index in 30"
            :key="index"
          >
            <div slot="footer">
              <van-button size="mini">按钮</van-button>
              <van-button size="mini">按钮</van-button>
            </div>
          </van-card>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      imageURL: "http://placehold.it/350x350"
    };
  },
  mounted() {
    const options = {
      click: true,
      tap: true
    };
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, options);
      } else {
        this.scroll.refresh();
      }
    });
  }
};
</script>

<style lang="stylus" scoped>
.room-list-item {
  position: absolute;
  top: 2.66rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
</style>
